<template>
  <n-form
      style="margin-top: 24px"
      ref="formRef"
      :model="form"
      :rules="rules"
      label-placement="top"
      label-width="120"
      require-mark-placement="right-hanging"
  >
    <n-form-item label="名称" path="name">
      <n-input v-model:value="form.name" placeholder="请输入名称"></n-input>
    </n-form-item>
    <n-form-item label="编码" path="sn">
      <n-input v-model:value="form.sn"  placeholder="请输入编码"></n-input>
    </n-form-item>
    <n-form-item label="介绍" path="">
      <n-input v-model:value="form.briefInfo" type="textarea" style="min-height: 200px" placeholder="请输入介绍"></n-input>
    </n-form-item>
  </n-form>
</template>

<script setup>
import {onMounted, reactive, ref, watch} from 'vue'
import {JBoltApi} from '@/service/request'

const props = defineProps({
  id: {
    type: String
  }
})


const formRef = ref(null)

const form = ref({
  id: '',
  sn: "",
  name: "",
  briefInfo: "",
})

const rules = {
  name: {
    required: true,
    message: '请输入名称',
    trigger: 'change'
  },
  sn: {
    required: true,
    message: '请输入编码',
    trigger: 'change'
  }
}





async function submit(fun) {
  await formRef.value?.validate()

  console.debug('提交表单', form.value)

  let url = props.id ? '/aiApp/update' : '/aiApp/add'

  await JBoltApi.tryPost(url, form.value)


  if (fun) {
    fun()
  }

  return true
}

defineExpose({
  submit
})

async function loadEditData() {
  let {result} = await JBoltApi.get(`/aiApp/getById/${props.id}`)
  console.log('8888',result)
  form.value = result.data
}

onMounted(()=>{
  if(props.id){
    loadEditData()
  }
})


</script>

<style scoped lang="scss">
.text_tip {
  font-size: 12px;
  color: #999;
}
</style>